<ul id="reportesTab" class="nav nav-tabs">
    <li class="active">
        <a href="#fotocopias" data-toggle="tab">Fotocopias</a>
    </li>
    <li>
        <a href="#pedidos" data-toggle="tab">Pedidos</a>
    </li>
    <li>
        <a href="#caja" data-toggle="tab">Caja</a>
    </li>
    <li>
        <a href="#facturacion" data-toggle="tab">Facturacion</a>
    </li>
    <li>
        <a href="#usuarios" data-toggle="tab">Usuarios</a>
    </li>
    <li>
        <a href="#textos" data-toggle="tab">Textos</a>
    </li>
    <li>
        <a href="#carreras" data-toggle="tab">Carreras</a>
    </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="fotocopias">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por mes</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por dia</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por empleado</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
    <div class="tab-pane" id="pedidos">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por dia</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por mes</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por empleado</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por franja horaria estipulada</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por franja de retiro real</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
    <div class="tab-pane" id="caja">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Todo</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por dia</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por mes</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por empleado</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
    <div class="tab-pane" id="facturacion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por apuntes</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por articulos de libreria</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por fotocopias sueltas</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por gabinete</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
    <div class="tab-pane" id="usuarios">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por pedidos realizados</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por pedidos pendientes</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
    <div class="tab-pane" id="textos">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por año</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Historico</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por carrera</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
    <div class="tab-pane" id="carreras">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por usuarios</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por usuarios por año</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Por docentes</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $('#reportesTab a').click(function(e) {
        e.preventDefault();
        $(this).tab('show');
    });
</script>